<template>
	<div
		class="user-info-card-com w-full bg-white py-5 px-8 rounded-md flex items-center justify-between">
		<div class="user-info flex items-center">
			<div class="avatar w-16 h-16 overflow-hidden rounded-full shadow-md relative cursor-pointer">
				<nuxt-img
					width="100%"
					height="100%"
					src="https://server.lanyunblog.com/static/2107542d651ebc6485d681ea863cab60.jpg" />
				<div
					title="上传"
					class="edit-avatar absolute top-0 right-0 w-full h-full rounded-full flex items-center justify-center">
					<icon class="text-white" name="material-symbols:upload-rounded" :size="20" />
				</div>
			</div>
			<div class="info ml-5">
				<div class="username font-bold text-lg text-gray-700 flex items-center">
					<span>LanYun</span>
					<span class="text-sm text-blue-500 ml-2">♂</span>
				</div>
				<div class="email text-sm text-green-500 mt-1">123132@qq.com</div>
			</div>
		</div>
		<div class="user-info-edit flex flex-wrap">
			<div
				class="edit px-5 border mx-1 py-1 text-sm cursor-pointer border-gray-300 flex items-center text-gray-700 hover:border-blue-500 hover:text-blue-500">
				<icon name="material-symbols:edit-square-outline" :size="16" />
				<span class="ml-1">编辑</span>
			</div>
			<div
				class="log-out px-5 border mx-1 py-1 text-sm cursor-pointer border-gray-300 flex items-center text-gray-700 hover:border-red-500 hover:text-red-500">
				<icon name="ion:md-log-out" :size="17" />
				<span class="ml-1">退出登录</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
export default defineComponent({
	name: 'UserInfoCard',
	setup() {
		return {};
	},
});
</script>

<style lang="scss" scoped>
.avatar {
	.edit-avatar {
		display: none;
		backdrop-filter: blur(5px);
		background-color: rgba(0, 0, 0, 0.3);
	}

	&:hover {
		.edit-avatar {
			display: flex;
		}
	}
}
</style>
